<!DOCTYPE html>
<html lang="en">
    {% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/xm-select-master/dist/xm-select.js"></script>
</head>

<body>
    <div class="udukb">  <!--导栏-->
        <a href={% url 'index' %}><img src="{% static 'img/loog.png' %}" width="200px" height="60px"></a>
        <div class="aeuj">
            <ul>
                <li ><a href={% url 'index' %} class="yoqc">音乐馆</a></li>
                <li><a href={% url 'ujqi_rdtf' %}>音乐排行</a></li>
                <li><a href={% url 'wd' %}>我的音乐</a></li>
            </ul>
        </div>
        <div class="rtfp">
            <input type="text">
            <div><span class="layui-icon">&#xe615;</span></div>-
        </div>
        {% if current_etyn == None %}
          <a href={% url 'logn' %}><span>登录</span></a>
        {% else %}
        <div>
          <ul class="layui-nav" lay-bar="disabled">
            <li class="layui-nav-item" lay-unselect="">
              <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
              <dl class="layui-nav-child">
                <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        {% endif %}
    </div>
    <div class="skuj">
        <div class="sk-uduk">
            <img src="/media/{{ovrn.skma_img}}" width="250px" height="250px">
            <div class="sk-riglp layui-icon">
                <h2 style="margin-bottom:10px">{{ovrn.skma_name}}</h2>
                <p style="margin-bottom:10px">&#xe66f; {{ovrn.skrt}}</p>
                <div style="float:left">
                    <p>流派：{{ovrn.iyir}}</p>
                    <p>发行时间：{{ovrn.vtf_time}}</p>
                </div>
                <div style="float:left;margin-left:20px; margin-bottom:10px">
                    <p>语种：{{ovrn.ygtk}}</p>
                    <p>唱片公司：{{ovrn.kjrh_wvng}}</p>
                </div>
                
                <div style="margin-top:10px">
                    <a href="{% url 'ulpfk' %}?odkl=1&id={{ovrn.skma_id}}" class="layui-btn"> &#xe652; 播放</a>
                    {% if a %}
                        <a onclick="bcii({{ovrn.skma_id}})" class="layui-btn layui-btn-primary epny-udqc">&#xe68f; 收藏</a>
                    {% else %}
                        <a onclick="hkdm({{ovrn.skma_id}})" class="layui-btn layui-btn-primary">&#xe68c; 收藏</a>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="sk-gqge">
            <div class="gqge-left">
                <h2 >歌词</h2>
                <hr>
                <div id='sk-yngk'>
                    <p>光辉岁月 (粤语) - BEYOND</p>
                    <p>词：黄家驹</p>
                    <p>曲：黄家驹</p>
                    <p>编曲：黄家驹</p>
                    <p>钟声响起归家的讯号</p>
                </div>
            </div>
            <div class="gqge-rigth">
            </div>
        </div>
    </div>
</body>
<script>
    $(function (){
        $.ajax({
            url:'/media/{{ovrn.skma_txt}}',
            success:function(data){
                var online = data.split('\n')
                a = ''
                for(i=0;i<=online.length-1;i++){
                    online_1 = online[i].split(']')
                    if (online_1[1] == ''){
                        continue;
                    }
                    a+="<p>"+online_1[1]+"</p>"
                }
                document.getElementById("sk-yngk").innerHTML = a
            }
        })
    })

    function hkdm(id){
        layer.confirm('是否收藏歌曲', {
                btn: ['取消','确定'] //按钮
                }, function(){
                layer.msg('操作取消', {icon: 1});
                }, function(){
                    var hid = id
                    $.ajax({
                        type:"POST",
                        url:"ujqi_nhan",
                        data:{'id':hid},
                        headers: { "X-CSRFToken": "{{ csrf_token }}" },
                        success:function(data){
                            var a = JSON.stringify(data.url);
                            window.location.href=a.split('"')[1]
                        }
                    })
            });
    }

    function bcii(id){
        layer.confirm('是否取消收藏歌曲', {
                btn: ['取消','确定'] //按钮
                }, function(){
                layer.msg('操作取消', {icon: 1});
                }, function(){
                    var bid = id
                    $.ajax({
                        type:"POST",
                        url:"ujqi_nhan_bcii",
                        data:{'id':bid},
                        headers: { "X-CSRFToken": "{{ csrf_token }}" },
                        success:function(data){
                            var a = JSON.stringify(data.url);
                            window.location.href=a.split('"')[1]
                        }
                    })
            });
    }
</script>
<style>
    .epny-udqc{
        color:red;
    }
    .layui-nav{
        background-color:#ffffff;
      }
    .skuj {
        width: 1080px;
        margin: 0 auto;
    }

    .sk-uduk {
        height: 250px;
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .sk-riglp {
        margin-left: 30px;
    }

    .sk-gqge {
        margin-top: 30px;
        display: flex;
    }

    .gqge-left {
        width: 800px;
        margin-bottom:50px;
    }

    .gqge-rigth {
        width: 280px;
        margin-left:40px;
    }
</style>
<style>
    /* 头部导航栏 */
    .udukb {
        width: 1080px;
        height: 60px;
        margin: 0 auto;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .aeuj ul {
        list-style: none;
    }

    .aeuj ul li {
        display: inline;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 18px;
    }

    .yoqc {
        color: #1E9FFF;
    }

    .rtfp input {
        height: 25px;
        border: none;
        border-top: 1px black solid;
        border-bottom: 1px black solid;
        border-left: 1px black solid;
        font-size: 16px;
    }

    .rtfp {
        display: flex;
    }

    .rtfp div {
        height: 25px;
        width: 20px;
        border-top: 1px black solid;
        border-right: 1px black solid;
        border-bottom: 1px black solid;
        line-height: 25px;
    }
</style>

</html>